<template>
    <section class="todoapp">
        <TodoHeader @add-todo="addtodo" />
        <TodoBody :arr="showlist" />
        <TodoFooter :arr1="list" @del-todo="deltodo" @change-todo="changetodo" />


    </section>
</template>

<script>
    import './assets/css/base.css'
    import './assets/css/index.css'
    import TodoHeader from './components/TodoHeader.vue'
    import TodoBody from './components/TodoBody.vue'
    import TodoFooter from './components/TodoFooter.vue'

    export default {
        data() {
            let list = JSON.parse(window.localStorage.getItem('list'))
            return {
                selectedType: 'all',
                list: list || [{
                        id: 100,
                        name: "吃饭",
                        isDone: true
                    },
                    {
                        id: 201,
                        name: "睡觉",
                        isDone: false
                    },
                    {
                        id: 103,
                        name: "打豆豆",
                        isDone: true
                    },
                ],
            };
        },
        watch: {
            list: {
                deep: true,
                handler(newVal) {
                    window.localStorage.setItem('list', JSON.stringify(newVal))
                }
            }
        },
        components: {
            TodoHeader,
            TodoBody,
            TodoFooter
        },
        methods: {
            addtodo(name) {
                const obj = {
                    name,
                    id: new Date(),
                    isDone: false
                }
                this.list.push(obj)
            },
            deltodo() {
                this.list = this.list.filter(item => !item.isDone)
            },
            changetodo(i) {
                this.selectedType = i
            }
        },
        computed: {
            showlist() {
                if (this.selectedType === 'all') {
                    return this.list
                } else if (this.selectedType === 'no') {
                    return this.list.filter(item => !item.isDone)
                } else {
                    return this.list.filter(item => item.isDone)
                }
            }
        }
    }
</script>

<style>

</style>